<template>
  <h1>这是周欣耀的页面</h1>
  <to-do-header @addTodo="addToDo"></to-do-header>
  <to-do-main :list="showList" @delTodo="delTodo"></to-do-main>
  <to-do-foot :lastLength="lastLength" :status="status" 
  @updateStatus="updateStatus"></to-do-foot>
</template>

<script setup>
import { ref,computed } from 'vue';
import ToDoHeader from './components/ToDoHeader.vue';
import ToDoMain from './components/ToDoMain.vue';
import ToDoFoot from './components/ToDoFoot.vue';

const list = ref([
    {id:1,name:"学习Vue3", done:false},
    {id:2,name:"跑步" ,done:true},
]);

function addToDo(name) {
  if (name != "") {
    list.value.push({ name, done: false, id: Math.floor(Math.random()) * 100})
  } else {
    alert("任务不能为空");
  }
}

function delTodo(id) {
  //filter 遍历数组，id!=item.id
  list.value = list.value.filter((item) => item.id != id);
}

// 计算未完成任务总数
const lastLength = computed(()=>{
  return list.value.filter((item) => item.done).length//完成去！
})

// 定义任务状态
const status = ref("所有")
const showList = computed(()=>{
  if(status.value === "所有"){
    return list.value
  }
  if(status.value == "待办"){
    return list.value.filter(item => !item.done)
  }
  if(status.value == "完成"){
    return list.value.filter(item => item.done)
  }
})

function updateStatus(statuses){
  status.value = statuses
}
</script>

<style>

</style>